<template>
	<div class="good-content">
		<div class="good-div">
			<!--<router-link  :to="'/index/goods/goodinfo/'+id">-->
				<router-link class="good-con" v-for="item  in  newsList" :key="item.id" tag="div":to="'/index/goods/goodinfo/'+item.id">
				<img :src="item.img_url" alt="">
				<p class="title">{{item.title}}</p>
				<div>
					<div class="price">
						<span class="new-price">￥{{item.sell_price}}</span>
						<span class="old-price">￥{{item.market_price}}</span>
					</div>
					<div class="sell">
						<span class="selling">热卖中</span>
						<span class="num">剩{{item.stock_quantity}}件</span>
					</div>
				</div>
			</router-link>
			<!--</router-link>-->
		
			

		</div>
	</div>
</template>

<script>
	import {Toast}  from  'mint-ui'
	export default({
		data() {
			
			return {
          index:1,
          newsList:[]
//        id:this.$route.params.id
			}
		},
		created(){
			this.getgoodslist();
		},
		methods: {
         getgoodslist(){
         	this.$http.get('api/getgoods?pageindex='+this.index).then(function(data){
         		
         		if(data.body.status==0){
//       			console.log(data.body)
         			this.newsList=data.body.message;
         			console.log(this.newsList)
         		
         		}else{
         			Toast('获取商品列表失败！')
         		}
         		
         	})
       
         }
		}
	})
</script>

<style lang="less">
	body {
		margin: 0;
		padding: 0;
		background: #f4f8fb!important;
	}
	
	.good-div {
		display: flex;
		padding: 5px;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		.good-con {
			position: relative;
			min-width: 48%;
			justify-content: space-between;
			width: 48%;
			background: #fff;
			min-height: 250px;
			padding: 2px;
			border-radius: 3%;
			box-shadow: 0px 0px 9px #ccc;
			margin-right: 7px;
			margin-bottom: 8px;
			
			img {
				width:100%;
				height:160px;
			}
			.title {
				color: #333333;
				margin: 0px 9px;
				padding: 0;
				font-size: 14px;
				/*padding: 5px;*/
			}
			.price {
				.new-price {
					font-size: 14px;
					color: #fd2741;
					font-weight: bold;
					letter-spacing: 2px;
				}
				.old-price {
					font-size: 12px;
					color: #7a7a7a;
					text-decoration: line-through;
					letter-spacing: 2px;
				}
			}
			.sell {
				display: flex;
				justify-content: space-between;
				font-size: 13px;
				color: #7a7a7a;
				bottom: 0;
				
			}
		}
	}
</style>